<template>
  <div class="authority-setting">
    <div class="" style="flex:0 0 70px;" v-show="canShow"></div>

    <!-- 头部 -->
    <div class="authority-title">
      <h2>功能管理</h2>
      <div class="authority-right">
        <span class="authority-btn" @click="selectBtnSubmit">{{ selectBtnTitle }}</span>
        <span class="authority-btn" @click="saveBtnSubmit">保存</span>
        <span class="authority-backBtn" @click="goBackBtnSubmit">返回</span>
        <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
          <path :d="svgPath.closeFullScreen"/>
        </svg>
      </div>
    </div>

    <!-- 树头和树 -->
    <div class="authority-content">
      <!-- 头部 -->
      <div class="content-header">
        <span class="header-tip"></span>
        <p class="header-title">功能权限列表</p>
      </div>
      <!-- 树 -->
      <div class="content-tree">
        <el-tree
          ref="tree"
          show-checkbox
          default-expand-all
          node-key="menuId"
          :expand-on-click-node="false"
          :data="treeData"
          :props="defaultProps"
          :default-checked-keys="defaultCheckedkeys"
          @check-change="checkChange"
          @check="check">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span
          :class="data.menuType == 1 ? 'pageType' : data.menuType == 2 ? 'fileType' : data.menuType == 3 ? 'buttonType' : data.menuType == 4 ? 'searchType' :''"></span>
        <span class="label">{{ node.label }}</span>
      </span>
        </el-tree>

      </div>
    </div>

    <!-- 弹窗 -->
    <dap-popover ref="saveAuthorityPopup" :leftBtnText="'确认'" @clickLeft="saveAuthorityPopupLeftClick"
                 :hideRightBtn="true">
      <div class="savePop">
        <p>功能权限设置不能为空</p>
      </div>
    </dap-popover>
  </div>
</template>
<script>
  import {svgPath, quitFullScreen} from "../../assets/js/utils";
  import dapPopover from "../view/dap-popover.vue";
  import {getRoleMenuRequest, saveRoleMenuRequest} from "../../api/authority";

  export default {
    props: ['isChange', 'fullScreen'],
    data () {
      return {
        svgPath: svgPath,
        canShow: true,
        treeData: [],
        selectBtnTitle: '全选',
        allFirstMenuIds: [], // 第一级菜单所有Id 用于全选和反选
        currentRole: {},
        defaultCheckedkeys: [],
        defaultProps: {
          children: 'childMenus',
          label: 'menuName'
        }
      }
    },
    watch: {
      isChange () {
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      }
    },
    components: {
      dapPopover
    },
    mounted () {
      this.currentRole = this.$route.query.data;
      // 查询树列表
      getRoleMenuRequest({roleId: this.currentRole})
        .then((params) => {
          if (params.code === 0) {
            let data = params.data;
            let menuList = data.menuList;
            menuList.forEach((item, index) => {
              this.allFirstMenuIds.push(item.menuId);
            });

            if (data.menus) {
              let checkRoleIds = [];
              data.menus.forEach((item, index) => {
                checkRoleIds.push(item.menuId);
              });
              this.defaultCheckedkeys = checkRoleIds;
            }

            this.treeData = menuList;
          } else {
            this.showToast(params.message);
          }
        });
    },
    methods: {
      // 取消全屏
      closeAll () {
        quitFullScreen();
      },
      // 选择按钮点击
      selectBtnSubmit () {
        if (this.isSelectedAllNode() == false) {
          let idArray = this.allFirstMenuIds;
          this.selectTreeNodeWithIdArray(idArray);
          this.selectBtnTitle = '反选';

        } else {
          let idArray = [];
          this.selectTreeNodeWithIdArray(idArray);
          this.selectBtnTitle = '全选';
        }
      },
      // 选中框
      check (currentNode, isSelected) {
        let checkedNodes = isSelected.checkedNodes;
        let checkedKeys = isSelected.checkedKeys;
        let halfCheckedNodes = isSelected.halfCheckedNodes;
        let halfCheckedKeys = isSelected.halfCheckedKeys;

        let cascadeParentId = currentNode.cascadeParentId;
        let cascadeChilds = currentNode.cascadeChilds;

        // 选中需要依赖的节点(添加) 需要选中依赖节点
        if (currentNode.isCascadeParent == 1) {
          if (!this.isInArray(checkedKeys, cascadeParentId)) {
            checkedKeys.push(cascadeParentId);
            this.selectTreeNodeWithIdArray(checkedKeys);
          }
        }

        // 选中依赖节点, 需要判断是否有子依赖被选中 有选中时 不允许取消
        if (currentNode.menuType == 4) {
          let isContain = this.intersect(checkedKeys, cascadeChilds);
          if (isContain.length) {
            if (!this.isInArray(checkedKeys, currentNode.menuId)) {
              checkedKeys.push(currentNode.menuId);
              this.selectTreeNodeWithIdArray(checkedKeys);
              this.showToast(currentNode.menuName + "页面的其他权限未取消");
            }
          }
        }
      },
      // 判断数组是否包含某个元素
      isInArray (arr, value) {
        for (var i = 0; i < arr.length; i++) {
          if (value === arr[i]) {
            return true;
          }
        }
        return false;
      },
      // 判断两个数组的交集
      intersect (arrA, arrB) {
        let arr = [];
        arrA.forEach((itemA, indexA) => {
          arrB.forEach((itemB, indexB) => {
            if (itemA === itemB) {
              arr.push(itemA);
            }
          });
        });

        return arr;
      },
      // 保存按钮点击
      saveBtnSubmit () {
        //console.log( this.$refs.tree.getHalfCheckedKeys());return;
        // 半选中的id
        let halfChecked = this.$refs.tree.getHalfCheckedKeys();
        // 获取选择的权限
        let idArray = this.$refs.tree.getCheckedKeys();
        idArray = [...idArray, ...halfChecked];
        if (!idArray.length) {
          this.saveAuthorityPop();
          return;
        }
        let menuIds = idArray.join(',');
        saveRoleMenuRequest({roleId: this.currentRole, menuIds: menuIds})
          .then((params) => {
            if (params.code === 0) {
              //  保存权限成功
              let than = this;
              this.$message({
                message: '功能权限设置成功！',
                center: true,
                type: 'success',
              });
              than.goBack();
            } else {
              this.showToast(params.message);
            }
          });
      },
      // 返回按钮
      goBackBtnSubmit () {
        this.goBack();
      },
      // 通过idArray 选择 节点
      selectTreeNodeWithIdArray (idArray) {
        this.$refs.tree.setCheckedKeys(idArray);
      },
      // 每次节点的选择
      checkChange () {
        if (this.isSelectedAllNode()) {
          this.selectBtnTitle = '反选';
        } else {
          this.selectBtnTitle = '全选';
        }
      },
      // 是否选择了所有的节点
      isSelectedAllNode () {
        let selectIdArray = this.$refs.tree.getCheckedKeys();
        for (let i = 0; i < this.allFirstMenuIds.length; i++) {
          if (selectIdArray.indexOf(this.allFirstMenuIds[i]) == -1) {
            return false;
          }
        }

        return true;
      },
      // 保存按钮弹窗
      saveAuthorityPop () {
        this.$refs.saveAuthorityPopup.show();
      },
      // 保存按钮左侧点击
      saveAuthorityPopupLeftClick () {
        this.$refs.saveAuthorityPopup.hide();
      },
      // 返回
      goBack () {
        this.$router.replace({path: "/authority/role-list", query: {roleSet: 1}});
      },
      showToast (message) {
        this.$message({
          message: message,
          center: true,
          type: 'success'
        });
      }
    }
  }
</script>
<style lang="scss">
  .authority-setting {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .content-tree {
      background: #1b2b44;
      flex: 1 1 auto;
      overflow: auto;
      overflow-x: hidden;
    }

    .authority-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 0 0 44px;
    }

    .authority-title .authority-right {
      font-size: 12px;
      color: #fff;
    }

    .authority-title .authority-right .authority-btn {
      width: 80px;
      height: 30px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      display: inline-block;
      background-color: #2b9ff6;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 20px;
    }

    .authority-title .authority-right .authority-btn:hover {
      background-color: #0a82d8;
    }

    .authority-title .authority-right .authority-backBtn {
      width: 80px;
      height: 30px;
      color: #2b9ff6;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      display: inline-block;
      background-color: transparent;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 20px;
      border: 1px solid #2b9ff6;
    }

    .authority-title .authority-right .authority-backBtn:hover {
      color: #fff;
      background-color: #2b9ff6;
    }

    .all-close-btn {
      float: right;
      width: 30px;
      height: 32px;
      cursor: pointer;
      margin-top: 7px;
      margin-right: 20px;
    }

    .all-close-btn:hover {
      fill: #fff;
    }

    /* 显示区 */
    .authority-content {
      flex: 1 1 auto;
      padding: 20px;

      display: flex;
      flex-direction: column;
    }

    .authority-content .content-header {
      width: 100%;
      display: flex;
      align-items: center;
      flex: 0 0 80px;
      background: #1b2b44;

    }

    .authority-content .content-header .header-tip {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background: #2b9ff6;
      margin-left: 18px;
    }

    .authority-content .content-header .header-title {
      font-size: 14px;
      color: #fff;
      margin-left: 10px;
    }

    .savePop {
      height: 54px;
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 300px;
    }

    .savePop > p {
      margin-top: 32px;
      font-size: 14px;
      color: #fff;
    }

    .el-tree {
      margin-left: 30px;
      background: transparent !important;
      width: 100%;
      height: 100%;
    }

    /* 箭头颜色 */
    .el-tree-node__expand-icon {
      color: #666;
    }

    /* 选择框颜色 */
    .el-checkbox__inner {
      background-color: transparent;
      border: 1px solid #666;
    }

    /* 移动上去的颜色 */
    .el-checkbox__inner:hover {
      border: 1px solid #666;
    }

    /* 选择后的框的颜色 */
    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #666;
    }

    /* 箭头颜色 */
    .el-checkbox__inner::after {
    }

    /* 移动颜色 */
    .el-tree-node:focus > .el-tree-node__content, .content-tree .el-tree-node__content:hover {
      /*background-color: #415f8c;*/
      background-color: transparent;
    }

    /* 自定义节点 */
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 12px;
    }

    .custom-tree-node .pageType {
      width: 14px;
      height: 14px;
      background-image: url("../../assets/img/tree-file-icon.png");
    }

    .custom-tree-node .fileType {
      width: 14px;
      height: 14px;
      background-image: url("../../assets/img/tree-page-icon.png");
    }

    .custom-tree-node .buttonType {
      width: 14px;
      height: 14px;
      background-image: url("../../assets/img/tree-button-icon.png");
    }

    .searchType {
      width: 14px;
      height: 14px;
      background-image: url("../../assets/img/tree-search-icon.png");
    }

    .custom-tree-node .label {
      margin-left: 10px;
      color: #fff;
    }
  }
</style>
